<!DOCTYPE html>
<html lang='en'>

<head>
    <meta charset='UTF-8'>
    <meta http-equiv='X-UA-Compatible' content='IE=edge'>
    <meta name='viewport' content='width=device-width, initial-scale=1.0'>
    <title>Document</title>
    <script src='https://cdn.staticfile.org/react/16.4.0/umd/react.development.js'></script>
    <script src='https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js'></script>
    <!-- 生产环境中不建议使用 -->
    <script src='https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js'></script>
<!-- PropTypes文件 -->
<script src='https://unpkg.com/prop-types@15.6.2/prop-types.js'></script>
</head>

<body>
    <div id='app'>
    </div>
    <script type='text/babel'>
        /*
            1.通过onXxx属性指定事件处理函数
                a.React使用的是自定义(合成)事件，而不是使用的原生DOM事件——为了更好的兼容性
                b.React中的事件是通过事件委托的方式去处理的(委托给组件最外层的元素)——为了高效
            2.通过event.target得到发生事件的DOM元素对象——不要过度使用ref

            react官方是不建议我们过多使用ref的，所以我们在开发中，尽量少使用ref，下面说一说哪些场景下ref可以不去使用
        */
       class Demo extends React.Component{
            render(){
                return (
                    <div>
                        {/* 比如当你操作的和你要拿到的是同一个节点时，就可以不用ref，因为事件的回调函数会自动被传入一个参数，这个参数就是这个DOM元素 */}
                        <input type="text" onBlur={node=>console.log(node.target.value)}/>    
                    </div>
                )
            }
       }

       ReactDOM.render(<Demo/>,document.getElementById('app'))
    </script>
</body>

</html>